<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
// import { useShare } from "@/hooks/share";
import { info_api } from "@/package/community/api/welfare_group";

import FormButton from "@/components/form/button.vue";

onLoad((options) => {
  useQuery<{ id: string }>(options as MiniApp.AppLaunchOption, (query) => {
    info_api({ id: query.id }).then((resp) => {
      infoData.is_vip = resp.is_vip;
      infoData.group_pic = resp.group_pic;
      infoData.name = resp.name;
      infoData.one_introduction = resp.one_introduction;
      infoData.avatar_arr = resp.avatar_arr;
      infoData.join_count = resp.join_count;
      infoData.press_button_desc = resp.press_button_desc;
      infoData.join_qr_code = resp.join_qr_code;
      infoData.introduction = resp.introduction;
    });
  });
});

const infoData = reactive({
  is_vip: 0,
  group_pic: "",
  name: "",
  one_introduction: "",
  avatar_arr: [] as string[],
  join_count: "",
  press_button_desc: "",
  join_qr_code: "",
  introduction: "",
});

// const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
//   "/package/other/pages/news/detail"
// );
</script>

<template>
  <image class="detail-bg" src="@/package/community/static/group-bg.png" />

  <view class="detail-group">
    <view style="position: relative; flex-shrink: 0">
      <image
        class="detail-group-img"
        :src="infoData.group_pic"
        mode="aspectFill"
      />
      <view class="detail-group-vip" v-if="infoData.is_vip === 1">VIP</view>
    </view>
    <view class="detail-group-content">
      <view class="detail-group-name">{{ infoData.name }}</view>
      <view class="detail-group-desc">{{ infoData.one_introduction }}</view>
      <view style="display: flex; align-items: center">
        <image
          class="detail-group-avatar"
          v-for="(i, d) of infoData.avatar_arr"
          :style="{ marginLeft: d === 0 ? '0' : '' }"
          :key="d"
          :src="i"
          mode="aspectFill"
        />
        <view class="detail-group-num">
          <text style="color: #ff7900">{{ infoData.join_count }}人</text>已加入
        </view>
      </view>
    </view>
  </view>

  <view class="detail-code">
    <view class="detail-code-desc">{{ infoData.press_button_desc }}</view>
    <image class="detail-code-img" :src="infoData.join_qr_code" />
    <FormButton>
      <image
        class="detail-code-btn"
        src="@/package/community/static/group-finger.png"
      />
      长按识别二维码
    </FormButton>
    <view class="detail-code-intro">{{ infoData.introduction }}</view>
    <image
      class="detail-code-trigger"
      :src="infoData.join_qr_code"
      show-menu-by-longpress
    />
  </view>
</template>

<style lang="scss">
page {
  padding-top: 20rpx;
}

.detail-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 670rpx;
}

.detail-group {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin: 0 30rpx 20rpx;
  border-radius: 40rpx;
  background-color: #ffffff;
  box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.05);

  .detail-group-img {
    display: block;
    width: 90rpx;
    height: 90rpx;
    border-top-left-radius: 12rpx;
  }

  .detail-group-vip {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 10rpx;
    font-size: 20rpx;
    color: #ffffff;
    line-height: 28rpx;
    font-weight: bold;
    border-radius: 10rpx 0;
    background: linear-gradient(90deg, #ff9d06, #fe6703);
  }

  .detail-group-content {
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
  }

  .detail-group-name,
  .detail-group-desc {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-group-name {
    margin-bottom: 4rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .detail-group-desc {
    margin-bottom: 10rpx;
    font-size: 20rpx;
    color: #999999;
    line-height: 28rpx;
  }

  .detail-group-avatar {
    margin-left: -10rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 2rpx solid #e8e8e8;
  }

  .detail-group-num {
    margin-left: 10rpx;
    font-size: 20rpx;
    color: #999999;
    line-height: 28rpx;
    font-weight: bold;
  }
}

.detail-code {
  position: relative;
  padding: 50rpx 30rpx 40rpx;
  margin: 0 30rpx;
  border-radius: 40rpx;
  background-color: #ffffff;
  box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.05);

  .detail-code-desc {
    margin: 0 30rpx 30rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: center;
    white-space: pre-line;
  }

  .detail-code-img {
    display: block;
    width: 266rpx;
    height: 266rpx;
    margin: 0 auto 30rpx;
    border-radius: 20rpx;
    border: 2rpx solid #eeeeee;
  }

  .detail-code-btn {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
  }

  .detail-code-intro {
    margin: 30rpx 10rpx 0;
    font-size: 24rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .detail-code-trigger {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
</style>